<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />	
		<title>友米乐</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" href="css/animate.css" />
		
	</head>
	<body>
		<div id="web">
			<!--<audio autoplay="autoplay" loop="loop">
				<source src="music/押尾コータロー - CLOSE TO YOU.mp3" type="audio/mp3"></source>
			</audio>-->
			<div class="swiper-container">
			  <div class="swiper-wrapper">
			    <div class="swiper-slide page page1">
			    	<header>
						<div class="logo">
							<img src="img/index/logo.png" alt="" />
						</div>
						<div class="title">
							<img src="img/index/title.png" alt="" />
						</div>
					</header>
					<div class="content">
						<div class="germany_bg ani" swiper-animate-effect="tada" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
							<div class="germany_font ani" swiper-animate-effect="pulse" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s">
								<img src="img/index/germany_font.png" alt=""/>
							</div>
						</div>
						<div class="product">
							<div class="product_title clearfix">
								<h3 class="title_left fl">德国|</h3>
								<div class="title_right fr">
									<h5>主题产品促销</h5>
									<p>满额<span>198元</span>/<span>298元</span>有礼</p>
								</div>
							</div>
							<ul class="product_intro">
								<li>
									<h5 class="intro_title">儿童产品</h5>
									<div class="product_img img_1">
										<p>让童话故事陪伴孩子成长</p>
									</div>
								</li>
								<li>
									<h5 class="intro_title">男士产品</h5>
									<div class="product_img img_2">
										<p>打造德国型男的爆款单品</p>
									</div>
								</li>
								<li>
									<h5 class="intro_title">女士产品</h5>
									<div class="product_img img_3">
										<p>优雅知性的德国美人护肤品</p>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<footer class="ani" swiper-animate-effect="flash" swiper-animate-duration="10s" swiper-animate-delay="0.3s">
						<img src="img/index/drop.png" alt="" />
					</footer>
			    </div>
			    <div class="swiper-slide page page2">
			    	<header class="clearfix">
			    		<div class="header-left fl">
			    			<div class="logo">
								<img src="img/index/logo.png" alt="" />
							</div>
				    		<div class="description">
				    			<img src="img/second/description_01.png" alt="" />
				    		</div>
			    		</div>
			    		<div class="header_right pic fr">
			    			<img src="img/second/cartoon.png" alt="" />
			    		</div>
			    	</header>
			    	<div class="content">
			    		<img src="img/third/color_line.png" alt="" />
			    	</div>
			    	<div class="selling_product">
			    		<div class="row clearfix">
			    			<div class="product product_1 fl">
				    			<div class="product_img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				    				<a href="http://wap.uniplaza.com/index/goodDetail.do?good_id=3482&invite_no=null"><img src="img/second/Weleda.jpg" alt="" /></a>
				    			</div>
				    			<p>Weleda维蕾德 可吞咽无氟儿童牙膏 50ml</p>
				    			<h4><span>活动价<i>&yen;57.00</i></span><del>市场价:&yen;88.00</del></h4>
			    			</div>
				    		<div class="product product_2 fr">
				    			<div class="product_img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				    				<a href="http://wap.uniplaza.com/index/goodDetail.do?good_id=3489&invite_no=null"><img src="img/second/Penaten.jpg" alt="" /></a>
				    			</div>
				    			<p>Penaten贝娜婷 婴幼儿无香免敏 护肤霜 100ml</p>
				    			<h4><span>活动价<i>&yen;66.00</i></span><del>市场价:&yen;79.00</del></h4>
				    		</div>
			    		</div>
			    		<div class="row clearfix">
			    			<div class="product product_3 fl">
				    			<div class="product_img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				    				<a href="http://wap.uniplaza.com/index/goodDetail.do?good_id=3478&invite_no=null"><img src="img/second/Kaufmann.jpg" alt="" /></a>
				    			</div>
				    			<p>Kaufmann 考夫曼婴儿抗过敏润肤霜  护臀霜</p>
				    			<h4><span>活动价<i>&yen;30.00</i></span><del>市场价:&yen;35.00</del></h4>
			    			</div>
				    		<div class="product product_4 fr">
				    			<div class="product_img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				    				<a href="http://wap.uniplaza.com/index/goodDetail.do?good_id=3480&invite_no=null"><img src="img/second/Signal.jpg" alt="" /></a>
				    			</div>
				    			<p>Signal洁诺含氟防蛀 婴幼儿儿童牙膏 可吞咽</p>
				    			<h4><span>活动价<i>&yen;25.00</i></span><del>市场价:&yen;25.00</del></h4>
				    		</div>	
			    		</div>
			    	</div>
			    	<footer class="ani" swiper-animate-effect="flash" swiper-animate-duration="10s" swiper-animate-delay="0.3s">
						<img src="img/index/drop.png" alt="" />
					</footer>
			    </div>
			    <div class="swiper-slide page page3">
			    	<header class="clearfix">
			    		<div class="header-left fl">
			    			<div class="logo">
								<img src="img/index/logo.png" alt="" />
							</div>
				    		<div class="description">
				    			<img src="img/third/description_02.png" alt="" />
				    		</div>
			    		</div>
			    		<div class="header_right pic fr">
			    			<img src="img/third/man.png" alt="" />
			    		</div>
			    	</header>
			    	<div class="content">
			    		<img src="img/third/color_line.png" alt="" />
			    	</div>
					<div class="selling_product">
			    		<div class="row clearfix">
			    			<div class="product product_1 fl">
				    			<div class="product_img ani" swiper-animate-effect="zoomInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				    				<a href="http://wap.uniplaza.com/index/goodDetail.do?good_id=3476&invite_no=null"><img src="img/third/kamill.jpg" alt="" /></a>
				    			</div>
				    			<p>卡蜜儿kamill 护手霜滋润保湿补水</p>
				    			<h4><span>活动价<i>&yen;35.00</i></span><del>市场价:&yen;48.00</del></h4>
			    			</div>
				    		<div class="product product_2 fr">
				    			<div class="product_img ani" swiper-animate-effect="zoomInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				    				<a href="http://wap.uniplaza.com/index/goodDetail.do?good_id=3510&invite_no=null"><img src="img/third/Fa.jpg" alt="" /></a>
				    			</div>
				    			<p>Fa 德国  男士洗发沐浴露复合矿物质舒缓2合1 250ml</p>
				    			<h4><span>活动价<i>&yen;26.90</i></span><del>市场价:&yen;68.00</del></h4>
				    		</div>
			    		</div>
			    		<div class="row clearfix">
			    			<div class="product product_3 fl">
				    			<div class="product_img ani" swiper-animate-effect="zoomInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				    				<a href="http://wap.uniplaza.com/index/goodDetail.do?good_id=3463&invite_no=null"><img src="img/third/Balea_shampoo.jpg" alt="" /></a>
				    			</div>
				    			<p>Balea芭乐雅 男士沐浴露洗发洗脸三合一海洋清爽型300ml</p>
				    			<h4><span>活动价<i>&yen;38.00</i></span><del>市场价:&yen;49.00</del></h4>
			    			</div>
				    		<div class="product product_4 fr">
				    			<div class="product_img ani" swiper-animate-effect="zoomInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				    				<a href="http://wap.uniplaza.com/index/goodDetail.do?good_id=3461&invite_no=null"><img src="img/third/Balea_cream.jpg" alt="" /></a>
				    			</div>
				    			<p>Balea芭乐雅 男士Q10深层焕肤紧致面霜 50ml</p>
				    			<h4><span>活动价<i>&yen;45.00</i></span><del>市场价:&yen;68.00</del></h4>
				    		</div>	
			    		</div>
			    	</div>
			    	<footer class="ani" swiper-animate-effect="flash" swiper-animate-duration="10s" swiper-animate-delay="0.3s">
						<img src="img/index/drop.png" alt="" />
					</footer>
			    </div>
			    <div class="swiper-slide page page4">
			    	<header class="clearfix">
			    		<div class="header-left fl">
			    			<div class="logo">
								<img src="img/index/logo.png" alt="" />
							</div>
				    		<div class="description">
				    			<img src="img/fourth/description_03.png" alt="" />
				    		</div>
			    		</div>
			    		<div class="header_right pic fr">
			    			<img src="img/fourth/beautiful_girl.png" alt="" />
			    		</div>
			    	</header>
			    	<div class="content">
			    		<img src="img/third/color_line.png" alt="" />
			    	</div>
			    	<div class="selling_product">
			    		<div class="row clearfix">
			    			<div class="product product_1 fl">
				    			<div class="product_img ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				    				<a href="http://wap.uniplaza.com/index/goodDetail.do?good_id=4505&invite_no=null"><img src="img/fourth/Balea_mask.jpg" alt="" /></a>
				    			</div>
				    			<p>Balea芭乐雅 矿物质白泥深层洁肤去角质补水面膜</p>
				    			<h4><span>活动价<i>&yen;69.00</i></span><del>市场价:&yen;80.00</del></h4>
			    			</div>
				    		<div class="product product_2 fr">
				    			<div class="product_img ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				    				<a href="http://wap.uniplaza.com/index/goodDetail.do?good_id=3471&invite_no=null"><img src="img/fourth/Balea_lip.jpg" alt="" /></a>
				    			</div>
				    			<p>Balea芭乐雅 保湿滋养润唇膏 多款味道  4.8g</p>
				    			<h4><span>活动价<i>&yen;28.00</i></span><del>市场价:&yen;29.00</del></h4>
				    		</div>
			    		</div>
			    		<div class="row clearfix">
			    			<div class="product product_3 fl">
				    			<div class="product_img ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				    				<a href="http://wap.uniplaza.com/index/goodDetail.do?good_id=3438&invite_no=null"><img src="img/fourth/Balea_eye_lip.jpg" alt="" /></a>
				    			</div>
				    			<p>Balea芭乐雅 玻尿酸紧致眼唇精华 15ml</p>
				    			<h4><span>活动价<i>&yen;68.00</i></span><del>市场价:&yen;72.00</del></h4>
			    			</div>
				    		<div class="product product_4 fr">
				    			<div class="product_img ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				    				<a href="http://wap.uniplaza.com/index/goodDetail.do?good_id=3441&invite_no=null"><img src="img/fourth/Balea_water.jpg" alt="" /></a>
				    			</div>
				    			<p>Balea芭乐雅 深层清洁温和3合1卸妆水 400ml</p>
				    			<h4><span>活动价<i>&yen;62.00</i></span><del>市场价:&yen;88.00</del></h4>
				    		</div>	
			    		</div>
			    	</div>
			    	<footer class="ani" swiper-animate-effect="flash" swiper-animate-duration="10s" swiper-animate-delay="0.3s">
						<img src="img/index/drop.png" alt="" />
					</footer>
			    </div>
			    <div class="swiper-slide page page5">
			    	<header>
			    		<div class="logo">
							<img src="img/index/logo.png" alt="" />
						</div>
			    	</header>
			    	<div class="content">
			    		<div class="notice">
			    			<img src="img/five/rule.png" alt="" />
			    		</div>
			    		<div class="gift">
			    			<img src="img/five/gift.jpg" alt="" />
			    		</div>
			    	</div>
			    	<footer class="ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="2s" swiper-animate-delay="0.3s">
			    		<img src="img/five/register.png" alt="" />
			    	</footer>
			    </div>
			    <div class="swiper-slide page page6">
			    	<header>
			    		<div class="logo">
			    			<img src="img/index/logo.png" alt="" />
			    		</div>
			    	</header>
			    	<div class="content">
			    		<img src="img/sixth/germany_heart.png" alt="" />
			    		<div class="germany_font_2 ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
			    			<img src="img/index/germany_font.png" alt="" />
			    		</div>
			    	</div>
			    	<div class="desc ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="0.5s" swiper-animate=delay="0.3s">	
			    		<h4>方法一:登录友米乐微信商城</h4>
			    	</div>
			    	<footer class="qr_code">
			    		<img src="img/sixth/register_shop.png"></img>
			    	</footer>
			    	
			    </div>
			    <div class="swiper-slide page page7">
			    	<header>
			    		<div class="logo">
			    			<img src="img/index/logo.png" alt="" />
			    		</div>
			    	</header>
			    	<div class="content">
			    		<img src="img/sixth/germany_heart.png" alt="" />
			    		<div class="germany_font_2 ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
			    			<img src="img/index/germany_font.png" alt="" />
			    		</div>
			    	</div>
			    	<div class="desc ani" swiper-animate-effect="slideInRight" swiper-animate-duration="0.5s" swiper-animate=delay="0.3s">	
			    		<h4>方法二:下载友米乐APP</h4>
			    	</div>
			    	<footer class="qr_code">
			    		<img src="img/sixth/down_app.png" alt=""></img>
			    	</footer>
			    	
			    </div>
			  </div>
			</div>
	</div>
		<script src="js/mobileReset.min.js"></script>
		<script src="js/swiper-3.4.2.min.js"></script>
		<script src="js/swiper.animate1.0.2.min.js"></script>
		<script>
			window.onload = function(){
				var swiper=new Swiper('.swiper-container',{
					direction:'vertical',
					loop: false,
					onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
				    swiperAnimateCache(swiper); //隐藏动画元素 
				    swiperAnimate(swiper); //初始化完成开始动画
			  	}, 
				  onSlideChangeEnd: function(swiper){ 
				    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				  } 
     
				});
			}
			
		</script>
	</body>
</html>
